<template>
    <div>
        <div class="top">
            <el-button type="primary" @click="model={}; $refs.dialog.show()">添加角色</el-button>
        </div>
        <Table
        :tree-props = "{children:'assss'}"
        :cols="cols"
        :data="list"
        >
        <template v-slot:action="{row}">
            <el-button type="primary" size="mini" @click="model = {...row};$refs.dialog.show();">编辑</el-button>
            <el-button type="warning" size="mini" @click="delRole(row)">删除</el-button>
            <el-button type="warning" size="mini" :loading="assignLoading" @click="getRights(row)">分配权限</el-button>
        </template>
        <!-- 组件递归 -->
        
        <!-- 展开列 -->
        <template v-slot:expand="{row}">
            <!-- {{row}} -->
            <Tag @update="getRoleList" :roleId = "row.id" :children = "row.children"></Tag>
        </template>
        </Table>
        <!-- 添加/修改 -->
        <DF @confirm="confirm" :title="title+'角色'" ref="dialog" :value="model" :opts="opts"/>
        <!-- 分配权限 -->
        <Dialog ref="assign" @confirm="modifyRights"  title="分配权限" >
          <el-tree
        ref="tree"
        :data="rightsList"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultCheckedKeys"
        :props="{
          children: 'children',
          label: 'authName',
        }"
      >
      </el-tree>
        </Dialog>
    </div>
</template>

<script>
import { getRoles,addRole,updateRole,deleteRole,getRightsList,updateRights } from '@/api/role'
import Tag from './components/Tag';

const opts = {
    roleName:{
        title:"角色名称",
        tag:"input",
        max:18,
        dis:false,
        required:true,
        rules:[
            {
                min:2,
                max:10,
            },
        ],  
    },
    roleDesc:{
        title:"角色描述",
        tag:"input",
        max:100,
        dis:false,
        required:true,
    },
};
const rules = {
    roleName:[
        {
            required:true,
            message:'角色名称不能为空'
        },
        {
            min:2,
            max:10,
            message:'角色名称长度为2-10位'
        }
    ]
}
/**
* 角色列表
*/
const cols = [
            {
                title:"#",
                type:"index"  
            },
            {
                title:'',
                type:"expand",
                slot:"expand",
            },
            {
                title:"角色名称",
                name:"roleName",
                width:200,
                align:"center",
            },
            {
                title:"角色描述",
                name:"roleDesc",
            },
            {
                title:"操作",
                slot:'action',
            }
            ];
export default {
    name:"RoleList",
    components:{Tag,},
    data() {
        return {
            list:[],
            //权限列表
            rightsList:[],
            assignLoading:false,
            defaultCheckedKeys: [],
            cols,
            opts,
            model:{},
            rules:{
                roleName:[
                    {required:true,message:'角色名称不能为空'},
                    {min:2,max:8,message:"角色名称长度2-8位"}
                ],
                roleDesc:[
                    {required:true,message:'角色描述不能为空'},
                    {max:100,message:"长度最大为100"}
                ]
            },
        }
    },
    mounted() {

    },
    computed:{
        /**
         * 标题
         */
        title(){
            return this.model.id ? "编辑":"添加";
        }
    },
    methods: {
           /**
             * 修改权限
             */
            async modifyRights() {
            const d = this.$refs.assign;
            try {
                const tree = this.$refs.tree;
                const keys = [...tree.getCheckedKeys(), ...tree.getHalfCheckedKeys()];
                d.start();
                await updateRights(this.model.id, keys.toString());
                d.hide();
                this.$m.success("权限修改成功");
                this.getRoleList();
            } catch (error) {}
            d.stop();
            },
        /**
         * 获取权限列表
         */
          async getRights(row) {
            try {
                this.model = row;
                this.defaultCheckedKeys = [];
                const deep = (children) => {
                for (const item of children) {
                    if (!item.children) {
                    this.defaultCheckedKeys.push(item.id);
                    continue;
                    }
                    if (item.children.length) {
                    deep(item.children);
                    }
                }
                };
                deep(row.children);
                this.assignLoading = true;
                this.rightsList = await getRightsList();
                this.$refs.assign.show();
            } catch (error) {}
            this.assignLoading = false;
    },
        async delRole(row){
            try {
                await this.$mb.confirm(`您确定要删除【${row.roleName}】吗？`);
                await deleteRole(row.id);
                this.$m.success('删除成功');
                this.getRoleList();
            } catch (error) {};
        },
        async confirm(model){
            const d = this.$refs.dialog;
            try {
                d.start();
                await (model.id ? updateRole : addRole)(model);
                this.$m.success(this.title+'成功');
                this.getRoleList();
                d.hide();
            } catch (error){};
                d.stop();
        },
        async getRoleList(){
            try {
                this.list = await getRoles();
            } catch (error) {};
        },

    },
    created(){
        this.getRoleList();
    }

}
</script>
<style lang="less">
    
</style>